<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background: -webkit-linear-gradient(
          to right,
          #fdbb2d,
          #22c1c3
        );
        background: linear-gradient(
          to right,
          #fdbb2d,
          #22c1c3
        );
      }

      .box {
        width: 200px;
        height: 300px;
        border: 1px solid black;
        margin: 20px auto;
        background: #f4f7e0;
      }

      .list {
        text-align: left;
      }
      .list li {
        display: inline-block;
        width: 100%;
        height: 30px;
        margin: 0px;
        text-indent: 1em;
        /* 文本 垂直居中  比line-height: center 好用  */
        line-height: 30px;   
        position: relative;
      }

      .list li:hover {
        background: #b9d312d5;
      }

      .list li::after {
        content: ">";
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <ul class="list">
        <li>手机</li>
        <li>电视</li>
        <li>笔记本 平板</li>
        <li>家电</li>
        <li>出行 穿戴</li>
        <li>智能 路由器</li>
        <li>电源 配件</li>
        <li>健康 儿童</li>
        <li>耳机 音箱</li>
        <li>生活 箱包</li>
      </ul>
    </div>
  </body>
</html>
